<template>
	<div class="neigouhui-20180408">
		<div class="banner"><img src="~@/assets/imgs/20180408/neigou_head.jpg" /></div>
		<div class="first-sort">
			<div class="global-sort one">
				<h1>iPhone X 64G</h1>
				<div class="worker"><sub class="mr-1">员工价</sub><sup>7742</sup></div>
				<p class="retail">市场价: 8388</p>
				<button class="buy" @click="goActivityGoods('5793', '')">立即购买</button>
			</div>
		</div>
		<list-item :list-data="listData1"></list-item>
		<div class="second-sort">
			<div class="global-sort two">
				<h1>Apple Watch Series 3</h1>
				<div class="worker"><sub class="mr-1">员工价</sub><sup>5486</sup></div>
				<p class="retail">市场价: 5888</p>
				<button class="buy" @click="goActivityGoods('5855', '')">立即购买</button>
			</div>
		</div>
		<list-item :list-data="listData2" class="second-list"></list-item>
		<div class="third-sort">
			<div class="global-sort three">
				<h1>iPad Pro</h1>
				<div class="worker"><sub class="mr-1">员工价</sub><sup>9353</sup></div>
				<p class="market">市场价: 10288</p>
				<button class="buy" @click="goActivityGoods('5849', '')">立即购买</button>
			</div>
		</div>
		<list-item :list-data="listData3"></list-item>
		<div class="fourth-sort">
			<div class="global-sort four two">
				<h1>MacBook 12寸</h1>
				<div class="worker"><sub class="mr-1">员工价</sub><sup>8838</sup></div>
				<p class="market">市场价: 10999</p>
				<button class="buy" @click="goActivityGoods('5818', '')">立即购买</button>
			</div>
		</div>
		<list-item :list-data="listData4"></list-item>
		<div class="more-discounts flex flex-item-center">
			<button @click="goHome">更多好货，来逛逛</button>
		</div>
	</div>
</template>
<script>
	import ListItem from './listItem';
	import Utils from '@/util/util'

	export default {
		name: 'activity20180326',
		components: {
	      'list-item': ListItem
	    },
	    methods: {
	    	goActivityGoods: function(goodsId, activityId) {
				Utils.goActiveGoods(goodsId, activityId)
			},
			goHome() {
				Utils.goHome();
			}
	    },
	    data () { 
	    	return {
	    		listData1: [
		        	{id:'5802', url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_7751332415563648192_1521791556997.jpg', title: 'iPhone 8 64GB', workerPrice: '4762', marketPrice: '5888'},
		        	{id:'5796', url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_2842154467385863174_1521790798284.jpg', title: 'iPhone 8P 64GB', workerPrice: '5732', marketPrice: ' 6688'},
		        	{id:'5798', url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_4699682674678883943_1521791040630.jpg', title: 'iPhone 8P 256GB', workerPrice: '6888', marketPrice: '7988'},
		        	{id:'5794', url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_1490697913541271804_1521790351160.jpg', title: 'iPhone X 256GB', workerPrice: '8873', marketPrice: '9688'}
		        ],
		        listData2: [
		        	{id:'5854', url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_7183059361978492770_1521957173110.jpg', title: 'Apple Watch Series 3 GPS + 蜂窝网络，38 毫米不锈钢表壳搭配米兰尼斯表带', workerPrice: '5115', marketPrice: '5488'},
		        	{id:'5853', url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_921927123680014206_1521956656512.jpg', title: 'Apple Watch Series 3 GPS + 蜂窝网络，38 毫米不锈钢表壳', workerPrice: '4277', marketPrice: '4588'},
		        	{id:'5861', url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_7919806577501944641_1521960477721.jpg', title: 'Apple Watch Series 3 Nike+ GPS + 蜂窝网络，38 毫米', workerPrice: '2977', marketPrice: '3188'},
		        	{id:'5851', url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_7616369027035343250_1521949467847.jpg', title: 'Apple Watch Series 3 GPS，42 毫米', workerPrice: '2699', marketPrice: '2888'}
		        ],
		        listData3: [
		        	{id:'5848', url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_1602966620496710985_1521903584645.jpg', title: '苹果 12.9英寸 iPad Pro Wi-Fi + Cellular 512GB 无ESIM 深空灰色', workerPrice: '9262', marketPrice: '10288'},
		        	{id:'5847', url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_1684556086135494038_1521903343037.jpg', title: '苹果 12.9英寸 iPad Pro Wi-Fi + Cellular 256GB 无ESIM', workerPrice: '7959', marketPrice: '8688'},
		        	{id:'5777', url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_4732958478303810641_1521786904079.jpg', title: '苹果 iPad mini 4 WLAN CELL 128GB （银色）', workerPrice: '4300', marketPrice: '4560'},
		        	{id:'5783', url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_7691975149223859165_1521787731069.jpg', title: '苹果 IPad mini4 WI-FI 128GB 金色', workerPrice: '3010', marketPrice: '3280'}
		        ],
		        listData4: [
		        	{id:'5827', url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_8789061222989412990_1521796656787.jpg', title: 'Apple MacBook Pro 15.4寸 2.8GHZ+555/256GB（深空灰）', workerPrice: '15908', marketPrice: '17999'},
		        	{id:'5821', url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_8863449658436763220_1521795570724.jpg', title: 'Apple MacBook Pro 13.3英寸2.3GHZ+8GB+128GB', workerPrice: '8858', marketPrice: '10999'},
		        	{id:'5781', url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_8675295274035229634_1521787633840.jpg', title: 'Apple 苹果电脑 苹果台式一体机 iMac 21.5英寸 2.3DC+1TB', workerPrice: '7626', marketPrice: '8999'},
		        	{id:'5788', url: 'https://zafgoos.oss-cn-shanghai.aliyuncs.com/service/goods/main/Image_1133053954656814893_1521788349613.jpg', title: 'Apple MacBook Air 13.3英寸 笔记本电脑 8G内存/128G 固态硬盘', workerPrice: '5909', marketPrice: '6999'}
		        ]
	    	}
	    }
	}
</script>
<style lang="less">
	@import '~@/assets/less/main.less';

	.neigouhui-20180408 {
		background-color: #f9c100;
		overflow: hidden;
		.banner {
			img {
				display: block;
				width: 100%;
			}
		}
		.first-sort, .second-sort, .third-sort, .fourth-sort {
			width: 7.06rem;
			height: 4.35rem;
			margin: 0 auto .2rem;
			border-radius: 8px;
			background-size: 100% auto;
			background-position: center center;
			background-repeat: no-repeat;
		}
		.first-sort {
			background-image: url('~@/assets/imgs/20180408/firstSort_bg.jpg');
		}
		.second-sort {
			background-image: url('~@/assets/imgs/20180408/secondSort_bg.jpg');
		}
		.third-sort {
			background-image: url('~@/assets/imgs/20180408/thirdSort_bg.jpg');
		}
		.fourth-sort {
			background-image: url('~@/assets/imgs/20180408/fourthSort_bg.jpg');
		}
		.global-sort {
			text-align: center;
			height: 4.35rem;
			overflow: hidden;
			h1 {
				font-size: .36rem;
				margin: .3rem 0 0;
			}
			.worker {
				sub, sup {
					vertical-align: bottom;
				}
				sub {
					font-size: .24rem;
					line-height: .24rem;
					color:#f90;
				}
				sup {
					font-size: .3rem;
					line-height: .3rem;
					display: inline-block;
				}
			}
			.retail {
				margin: .1rem 0 0;
				color: #666;
			}
			.buy {
				width: 2rem;
				height: .55rem;
				border: none;
				border-radius: .3rem;
				color: #fff;
				font-size: .24rem;
				margin-top: .1rem;
				.gradient-setting(#fa3489 , #fc4a72);
			}
			&.two .buy {
				.gradient-setting(#6b7dfb , #4691fb);
			}
			&.three, &.four{
				h1 {
					line-height: .36rem;
				}
				.market {
					font-size: .18rem;
					color:#666;
					margin: .1rem 0 0;
				}
				.buy {
					margin-top: 1.8rem;
				}
			}
			&.four .buy {
				margin-top: 1.95rem;
			}
		}
		.more-discounts {
			width: 6.44rem;
			height: 5.44rem;
			background: url('~@/assets/imgs/20180408/more_discounts_bg.png') center center no-repeat;
			background-size: 100% auto;
			margin: .2rem auto 0;
			button {
				width: 3.34rem;
				height: .8rem;
				background: #fa3588;
				font-size: .3rem;
				color:#fff;
				border: .1rem solid #f9bf00;
				border-radius: .4rem;
			}
		}
	}
</style>